<template>
  <div class="chart-box">
    <div id="chart-7" style="min-width: 460px; height: 350px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      opinionData: ["3", "2", "4", "4", "5"],
      line1: [],
      line2: [],
      line3: [],
      line4: [],
      years: [],
      demo: [120, 132, 101, 134, 90, 230, 210],
      chart: null,
    };
  },
  created() {
    // this.axios({
    //   url: "grad/yearList",
    //   methods: "get",
    // }).then((res) => {
    //   let years = res.data.data;

    //   years = years.sort(function (a, b) {
    //     return a - b;
    //   });
    //   //默认为最近一年

    //   this.start = years[years.length - 1];
    //   this.end = years[years.length - 1];

    //   this.initData();
    // });

    this.initData();
  },
  // mounted() {
  //   this.chart = echarts.init(document.getElementById("chart-7"))
  //   // let that = this;
  //   window.addEventListener('resize', () => {
  //     if (this.chart) {
  //       setTimeout(()=>{
  //         this.chart.resize()
  //       },10)
  //     }
  //   })
  // },
  computed: {
    // myChart() {
    //   return echarts.init(document.getElementById("chart-7"));
    // },
  },
  methods: {
    //初始化数据
    initData() {
      //折线一 升学率历年变化
      this.axios({
        url: "grad/upgradeRate",
        methods: "get",
      })
        .then((res) => {
          console.log("本科生升学率逐年变化");
          let year = [];
          let temp = [];
          for (let index = 0; index < res.data.data.length; index++) {
            year.push(res.data.data[index].year);
            temp.push((res.data.data[index].rate * 100).toFixed(2));
          }
          this.years = year;
          this.line1 = temp;
          // 软件学院就业率历年变化
          this.axios({
            url: "grad/employedRate",
            methods: "get",
          })
            .then((res) => {
              console.log("软件学院就业率历年变化");
              let temp = [];
              for (let index = 0; index < res.data.data.length; index++) {
                temp.push((res.data.data[index].rate * 100).toFixed(2));
              }
              this.line2 = temp;
              // 协议和合同就业留鲁比例历年变化
              this.axios({
                url: "grad/employedAtSD",
                methods: "get",
              })
                .then((res) => {
                  console.log("协议和合同就业留鲁比例历年变化");
                  let temp = [];
                  for (
                    let index = 0;
                    index < res.data.data.bachelor.length;
                    index++
                  ) {
                    temp.push(
                      (res.data.data.bachelor[index].rate * 100).toFixed(2)
                    );
                  }
                  this.line3 = temp;
                  // this.line4 = temp2;
                  this.$nextTick(() => {
                    // dom元素更新后执行，因此这里能正确打印更改之后的值
                    this.drawLine();
                  });
                })
                .catch((err) => {
                  console.log(err);
                });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });

      // let years = res.data.data
      // this.axios({
      //   url: "/grad/upgradeRate",
      //   method: "get",
      //   params: {

      //   },
      //   headers: {
      //     "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      //   },
      // })
      //   .then((res) => {

      //  调整成输出格式
      // })
      // .catch((err) => {
      //   console.log(err);
      // });

      // this.axios({
      //    url: "grad/upgradeRate",
      //   methods: "get",
      // })
      //   .then((res) => {
      //     console.log("本科生升学率逐年变化");
      //     let temp = [];
      //     for (let index = 0; index < res.data.data.length; index++) {
      //       temp.push((res.data.data[index].rate * 100).toFixed(2));
      //     }
      //     this.line2 = temp;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
      //   this.axios({
      //   url: "grad/employedRate",
      //   methods: "get",
      // })
      //   .then((res) => {
      //     console.log("软件学院就业率历年变化");
      //     let temp = [];
      //     for (let index = 0; index < res.data.data.length; index++) {
      //       temp.push((res.data.data[index].rate * 100).toFixed(2));
      //     }
      //     this.line2 = temp;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
      //   this.axios({
      //    url: "grad/employedAtSD",
      //           methods: "get",
      // })
      //   .then((res) => {
      //     console.log("协议和合同就业留鲁比例历年变化");
      //     let temp = [];
      //     for (let index = 0; index < res.data.data.length; index++) {
      //       temp.push((res.data.data[index].rate * 100).toFixed(2));
      //     }
      //     this.line2 = temp;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    drawLine() {
      echarts.init(document.getElementById("chart-7")).dispose();
      this.myChart = echarts.init(document.getElementById("chart-7"));
      let that = this;
      this.myChart.clear();
      this.myChart.setOption({
        title: {
          text: "逐年变化折线图",
          x: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "本科生升学率历年变化",
            "软件学院就业率历年变化",
            "本科生协议和合同就业留鲁比例历年变化",
          ],
          // data: ['邮件营销'],
          bottom: "bottom",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: that.years,
          // data: ["周一", "周二", "周三", "周四", "周五", "周六"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "本科生升学率历年变化",
            type: "line",
            stack: "总量",
            data: that.line1,
            // data: that.demo,
          },
        ],
        legend: {
          data: [
            "本科生升学率历年变化",
            "软件学院就业率历年变化",
            "本科生协议和合同就业留鲁比例历年变化",
          ],
          // data: ['邮件营销'],
          bottom: "bottom",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: that.years,
          // data: ["周一", "周二", "周三", "周四", "周五", "周六"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "本科生升学率历年变化",
            type: "line",
            stack: "总量",
            data: that.line1,
            // data: that.demo,
          },
          {
            name: "软件学院就业率历年变化",
            type: "line",
            stack: "总量",
            data: that.line2,
            // data: that.demo,
          },
          {
            name: "本科生协议和合同就业留鲁比例历年变化",
            type: "line",
            stack: "总量",
            data: that.line3,
            // data: that.demo,
          },
          // {
          //   name: "研究生协议和合同就业留鲁比例历年变化",
          //   type: "line",
          //   stack: "总量",
          //   data: that.line4,
          //   // data: that.demo,
          // },
        ],
      });
    },
    goTo(route) {
      this.$router.push(route);
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>
<style scoped>
.chart-box {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}

.chart-box :hover {
  cursor: pointer;
}
</style>
